<template>
  <div class="nanning-screen-select">
    <el-select v-model="selectValue" :placeholder="placeholder" @change="onChangeValue" popper-class="select-dark">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Emit } from 'vue-property-decorator'
@Component({
  name: 'nanning-screen-select'
})

export default class NanningScreenSelect extends Vue {
  @Prop({ default: '请选择' }) private placeholder!: string

  @Prop({ default: [] }) private options!: Array<any>

  @Prop({ default: '' }) private defaultValue!: string

  @Emit()
  private onChangeValue(e: any) {
    return e
  }

  private selectValue = this.defaultValue ? this.defaultValue : ''
}
</script>

<style lang="scss">
.nanning-screen-select {
  width: 100%;
  height: 100%;
  .el-select {
    border-radius: 2px;
    overflow: hidden;
    display: block;
  }
  .el-input__inner {
    height: 28px !important;
    line-height: 28px !important;
    // font-size: 16px !important;
    background: #01146B;
    border: 1px solid #0B3685;
    color: rgba(255, 255, 255, 0.7);
  }
}
.select-dark {
  background: rgba($color: #01146B, $alpha: 0.9) !important;
  border: 1px solid #0B3685 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  .el-select-dropdown__item {
    color: rgba(255, 255, 255, 0.7) !important;
  }
  .el-select-dropdown__item.selected {
    color: #409EFF !important;
    font-weight: 700;
  }
  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
    background-color: rgba($color: #0B3685, $alpha: 0.6);
  }
}
</style>

<style lang="scss" scoped>
.nanning-screen-select {

}
</style>
